<script>
export default {
  data(){
    return{
      counter:0,
      age: 18
    } 
  },
  methods:{
    addCounter(number){
      this.counter+=number;
    },
    addCounter2(number,e){// 事件e，可以看到当前是什么鼠标事件。
      this.counter+=number;
      console.log(e);
    },
    addAge(){
      this.age++;
    },
    divClick(){
      console.log("父元素的展示");
    },
    btnClick:function(){
      console.log("子元素的展示");
    },
    submitClick:function(){
      console.log("自己的方式提交")
    },
    onceClick:function(){
      console.log("只触发一次")
    },
    keyUp:function(){
      console.log("键盘被按下，（假设）数据被提交成功！")
    }
  }
}

</script>

<template>
  <div>
    <h1>事件处理</h1>
    <!-- 绑定事件，直接通过js代码处理 -->
    <button @click="counter++">1、{{counter}}</button>
    <!-- 绑定事件，没有传递参数 -->
    <button @click="addCounter">2、{{counter}}</button>
    <!-- 绑定事件，传递参数 -->
    <button @click="addCounter(5)">3、{{counter}}</button>
    <!-- 获取事件对象 -->
    <button @click="addCounter2">4、{{counter}}</button>
    <!-- 绑定事件，既要传递参数，也要有事件对象 -->
    <button @click="addCounter2(10,$event)">5、{{counter}}</button>
    <!-- 一个事件，绑定多个处理函数 -->
    <button @click="addCounter2(2),addAge()">6、{{counter}}——{{age}}</button>

    <!-- .stop阻止事件冒泡 -->
    <!-- 以前都是e.stop -->
    <div @click="divClick">
      <button @click.stop="btnClick">按钮</button>
    </div>

    <!-- .prevent 阻止默认行为 -->
    <!-- 本来这里就是普通的提交，但是我们阻止了，我们想用自己的方式提交 -->
    <form action="">
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>

    <!-- .once只触发一次回调 -->
    <!-- 比如有些按钮就，我希望只点击一次就失效了。 -->
    <button @click.once="onceClick">只触发一次的按钮</button>

    <!-- .{keyCode(键盘编码) | keyAlias(键盘的简写)} 监听键盘的某个键帽-->
    <!-- keyup:键盘按下 -->
    <p></p>
    <input type="text" @keyup="keyUp"/>
    <p></p>
    <input type="text" @keyup.enter="keyUp"/>
  </div>


</template>

<style> 

</style>
